<script lang="ts" setup>
import HomeBanner from "./components/home-banner.vue";
import HomeCategory from "./components/home-category.vue";
import HomePanel from "./components/home-panel.vue";
import HomeNew from "./components/home-new.vue";
import HomeHot from "./components/home-hot.vue";
import HomeBrand from "./components/home-brand.vue";
import HomeProduct from "./components/home-product.vue";
import HomeSpecial from "./components/home-special.vue";
</script>

<template>
  <!-- css结构复用的能力 - 重要 -->
  <div class="page-home">
    <!-- 首页顶部轮播区域 -->
    <div class="home-entry">
      <div class="container">
        <!-- 左侧分类 -->
        <HomeCategory />
        <!-- banner轮播图 -->
        <HomeBanner />
      </div>
      <!-- <XtxMore path="/login"></XtxMore> -->

      <!-- <HomePanel title="新鲜好物" subTitle="新鲜好物 品质靠谱">
      <template #right>
        <XtxMore to="/"></XtxMore>
      </template>
    </HomePanel>
    <div>sss</div> -->
      <!-- 面板组件  -->
      <!-- 新鲜好物 -->
      <HomeNew></HomeNew>
      <!-- 人气推荐 -->
      <HomeHot></HomeHot>
      <!-- 热门品牌 -->
      <HomeBrand></HomeBrand>
      <!-- 居家产品-->
      <HomeProduct></HomeProduct>
      <!-- 最新专题 -->
      <HomeSpecial></HomeSpecial>
    </div>
  </div>
</template>

<style lang="less" scoped></style>
